<template>
	<view class="content">
		<!-- <uni-nav-bar title="导航栏组件">123</uni-nav-bar> -->
		<text @click="toSP">
			跳转视频号
		</text>
		<button class="avatar-wrapper" hover-class="" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			获取
		</button>
		<image v-if="tximg != ''" style="width: 100px; height: 100px;" :src="tximg" mode=""></image>
		<view class="login-name">
			<view class="login-name-title">昵称</view>
			<input type="nickname" @input="nickChange" placeholder="请输入昵称" />
		</view>
		<button class="phoneButt" color='#4B7FFB' round size="large" open-type='getPhoneNumber'
			@getphonenumber="getPhoneNumber" type="primary">授权手机号</button>
		<button @click="dr">
			登入
		</button>
		<button @click="sq">
			授权
		</button>
		<button @click="sfsq">
			是否授权
		</button>
		<button @click="tz">
			跳转
		</button>
		<button @click="lb">
			获取列表
		</button>
		<button @click="tj">
			添加到橱窗
		</button>
		<button @click="ccsp">
			获取橱窗商品
		</button>
		 <web-view v-if="url != ''" :src="url"></web-view>
		<a href="https://channels.weixin.qq.com/miniprogram/live-commerce/auth?authkey=0_HLZICkSfsn1Y9hADl6HUaSnHbZj2sC_7gwCUID70ZKCCFHloEPeumDi_18snwFDZFy7GL_U">访问授权</a>
		<store-product appid="wxee2195baebef9b3c" product-id="10000154757057" 	product-promotion-link="v1=HHPloeZxBAsIX8wUJYsUkfzNYIdTK0IpRg2wKTkAQhAoQ0byh38ISz3qhXGX9cqYtGfH1qo_nUHvTBMS1FsjsosrzfNeOdv-Idpn3r5EyVAZpNkkV_sLg5uBI7OIW_wyMoBv49ThcJL__RoJ8uq9Rn6qWBcyf9U" custom-style="{{customStyle}}" />
		<!-- <store-product appid="wxee2195baebef9b3c" product-id="10000154757057" custom-style="{{customStyle}}" /> -->
		<!-- <store-product appid="wxee2195baebef9b3c" product-id="10000154757057" custom-style="{{customStyle}}" /> -->
	</view>
</template>

<script setup>
	 import {login,getauthorization,getitemlist,windowadd,getwindowauthstatus,windowgatall} from "../../until/api.js";
	import {
		ref ,reactive
	} from 'vue';
	let url = ref('')
	
	const customStyle = {
		card: {
		        'background-color': '#FAFAFA',
		      },
		      title: {
		        color: 'rgba(0, 0, 0, 0.8)',
		      },
		      price: {
		        color: '#cccccc'
		      },
		      'buy-button': {
		        width: '100px',
		        'border-radius': '30px',
		        'background-color': 'rgba(0,0,0,0.9)',
		        color: '#FFD48D',
		      },
		      'buy-button-disabled': {
		        width: '100px',
		        'border-radius': '30px',
		        'background-color': 'rgba(0,0,0,0.9)',
		        color: '#FFD48D',
		      },
	}
	const toSP = () => {
		wx.openChannelsUserProfile({
			finderUserName: 'sphwvdsGlsC3nhq', // 视频号id，必填
			success: function(res) {
				// 接口调用成功的回调函数，非必填99
				console.log('跳转成功');
			},
			fail: function(res) {
				// 接口调用失败的回调函数，非必填
				console.log('跳转失败', res.errMsg);
			},
			complete: function(res) {
				// 接口调用结束的回调函数（调用成功、失败都会执行），非必填
				console.log('接口调用结束');
			}
		})
	}
	let  logindata = reactive({
			  code: "",
			  mobile: "",
			  username: "",
			  inviteCode: "",
			  avatar: ""
	})
	let tximg = ref('')
	const onChooseAvatar = (e) => {
		console.log(e);
		tximg.value = e.detail.avatarUrl
		logindata.avatar = e.detail.avatarUrl
	}
	const nickChange = (e) => {
		console.log(e.detail.value);
		logindata.username = e.detail.value
	}
	const getPhoneNumber = (e) => {
		console.log(e);
		console.log(e.detail.code);
		logindata.mobile = e.detail.code
	}
	let openId = ref('')
	  const dr = ()=>{
		  uni.login({
		  	"provider": "weixin",
		  	"onlyAuthorize": true, // 微信登录仅请求授权认证
		  	success: function(event){
		  		const {code} = event
				logindata.code = code
				console.log('传递的',logindata);
		  		login(logindata).then(res => {
		  						console.log(res);
								openId.value = res.openId
		  					});
		  	},
		  	fail: function (err) {
		          // 登录授权失败
		          // err.code是错误码
		      }
		  })
		  
	  }
	  const sq = ()=>{
		  let data = {
			  openId: openId.value,
			  finder_id:"sphwvdsGlsC3nhq"
		  }
		  getauthorization(data).then(res => {
		  						console.log(res);
								// url.value = res.data.auth_info.auth_url
								wx.navigateToMiniProgram({
								  appId: res.data.auth_info.auth_wxa_appid,
								  path: res.data.auth_info.auth_wxa_path,
								  extraData: {
								    // 可以在这里传递一些额外的数据
								  },
								  success(res) {
								    // 成功跳转后的回调函数
								    console.log('成功调起授权页面');
								  },
								  fail(res) {
								    // 跳转失败后的回调函数
								    console.log('调起授权页面失败', res);
								  }
								});
		  					});
	  }
	  const tz = ()=>{
		  uni.navigateTo({
		  	url:"/pages/partner/v3/auth?scene=thirdapp&key=0_HJmdzX4ZOGCvT8NUOSIk6U2G4gb5OJ34iutWtAyMHkGrW5fyBsSOGsW73hdfh6FD4fMje3c"
		  })
	  }
	  const lb = ()=>{
		  let data = {
			  page_size:28
		  }
		  getitemlist(data).then(res => {
			  console.log(res);
		  })
	  }
	  const tj = ()=>{
		  let data = {
			  openfinderid:"of801qkqG3lzNZL3fGWyfqfuLDat5tvWgjfuLpxqgN9nhc3hDvHYgSjH8Sp2r2WLzPIdb84EV_Zw",
			  product_id:"10000154757057"
		  }
		  windowadd(data).then(res=>{
			  console.log(res);
		  })
	  }
	  const sfsq = ()=>	{
		  let data = {
		  	finder_id:"sphStUUIiCEzYK8",
		  }
		  getwindowauthstatus(data).then(res=>{
			  console.log(res);
		  })
	  }
	  const ccsp = ()=>	{
		   let data = {
			   openfinderid:"of801qkqG3lzNZL3fGWyfqfuLDat5tvWgjfuLpxqgN9nhc3hDvHYgSjH8Sp2r2WLzPIdb84EV_Zw",
			   appid:"wx36ecb17fcd9a639e",
			   offset:0,
			   need_total_num:true,
			   page_size:100
		   }
		   
		   windowgatall(data).then(res=>{
			   console.log(res);
		   })
	  }
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>